import { AreaPicker, Popup, Cascader } from "@taroify/core";
import { areaList } from "@vant/area-data";
import { Tab, Tabs } from "@antmjs/vantui";
import React, { useState } from "react";
import { View } from "@tarojs/components";
import "./index.less";
import PolicieRegulaList from "./components/PolicieRegulaList";

const PolicieRegula: React.FC = () => {
  const [showAreaSelector, setShowAreaSelector] = useState<boolean>(false);
  const [showTypeSelector, setShowTypeSelector] = useState<boolean>(false);

  const [typeValue, setTypeValue] = useState<string[]>([]);

  return (
    <View className="w-full h-full py-2 policie-regula__wrapper">
      <Tabs animated className="w-full h-full">
        <Tab key="1" title="政策法规">
          <PolicieRegulaList
            setShowAreaSelector={setShowAreaSelector}
            setShowTypeSelector={setShowTypeSelector}
          />
        </Tab>
        <Tab key="2" title="法规解读">
          <PolicieRegulaList
            setShowAreaSelector={setShowAreaSelector}
            setShowTypeSelector={setShowTypeSelector}
          />
        </Tab>
      </Tabs>

      <Popup
        open={showAreaSelector}
        rounded
        placement="bottom"
        onClose={setShowAreaSelector}
      >
        <Popup.Close />
        <AreaPicker areaList={areaList} depth={1} />
      </Popup>

      <Popup
        open={showTypeSelector}
        rounded
        placement="bottom"
        onClose={() => setShowTypeSelector(false)}
      >
        <Popup.Close />
        <Cascader
          options={[
            {
              value: "食品生产",
              label: "食品生产",
              children: [
                {
                  value: "特殊食品生产",
                  label: "特殊食品生产",
                },
                {
                  value: "普通食品生产",
                  label: "普通食品生产",
                },
              ],
            },
            {
              value: "食品流通",
              label: "食品流通",
              children: [
                {
                  value: "食品销售企业",
                  label: "食品销售企业",
                  children: [
                    {
                      value: "连锁销售企业总部(含仓储配送中心)",
                      label: "连锁销售企业总部(含仓储配送中心)",
                    },
                    {
                      value: "普通食品销售企业",
                      label: "普通食品销售企业",
                    },
                    {
                      value: "利用自动设备售卖的企业",
                      label: "利用自动设备售卖的企业",
                    },
                    {
                      value: "集中交易市场",
                      label: "集中交易市场",
                    },
                  ],
                },
              ],
            },
            {
              value: "餐饮服务",
              label: "餐饮服务",
            },
          ]}
          value={typeValue}
          title="请选择"
          placeholder="请选择"
          onSelect={setTypeValue}
          onChange={(_values_, _options) => {
            setShowTypeSelector(false);
          }}
        />
      </Popup>
    </View>
  );
};

export default PolicieRegula;
